<template>
	<view id="my-upload" class="my-upload">
		<view
			:class="['upload-item', (index + 1) % imageLineCount === 0 ? 'mr0' : '']"
			:style="imageStyle"
			v-for="(image, index) in filelist"
			:key="index"
			@click="onPreview(index)"
		>
			<view class="close-button" @click.stop="onDelete(index)">
				<u-icon name="close" size="28rpx" color="#fff"></u-icon>
			</view>
			<image class="photo" :src="getImagePath(image.path || image)" />
		</view>
		<image
			v-if="filelist.length < maxCount"
			id="add-photo"
			:class="['photo', (filelist.length + 1) % imageLineCount === 0 ? 'mr0' : '']"
			:style="imageStyle"
			src="/static/images/common/upload.png"
			@click="onChoose"
		/>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';
	import { uploadFileByPath } from '@/api/upload';
	import { serverUrl } from '@/config';
	
	const emits = defineEmits(['update:upload', 'update:delete', 'upload', 'delete']);
	const props = defineProps({
		// 图片列表
		filelist: {
			type: Array,
			default: () => [],
		},
		// 图片数量默认1张
		maxCount: {
			type: Number,
			default: 1,
		},
		// 图片大小默认无限制，单位为M
		maxSize: {
			type: Number,
			default: 0,
		},
		// 图片尺寸默认208rpx
		imageSize: {
			type: String,
			default: '208rpx',
		},
		// 图片一行显示数量
		imageLineCount: {
			type: Number,
			default: 3,
		},
		// 图片间距
		imageGap: {
			type: String,
			default: '10rpx',
		},
	});
	
	// 图片样式
	const imageStyle = computed(() => {
		return {
			width: props.imageSize,
			height: props.imageSize,
			marginRight: props.imageGap,
			marginBottom: props.imageGap,
		};
	});
	// 获取图片路径
	const getImagePath = (item: any) => {
		if (typeof item === 'string') {
			return item.includes('http') ? item : serverUrl + item;
		}
	}
	// 选择图片
	const onChoose = (): void => {
		uni.chooseImage({
			count: props.maxCount - props.filelist.length,
			async success(res: any) {
				const tempFiles = res.tempFiles.filter((file: any) => {
					if (props.maxSize === 0) {
						return true;
					}
					
					const condition: boolean = file.size / 1024 / 1000 < props.maxSize;
					if (!condition) {
						uni.$u.toast(`上传图片不得超过${props.maxSize}M`);
					}
					return condition;
				});
				const paths = await onUpload(tempFiles) as Array<string>;
				emits('upload', paths);
				emits('update:upload', [...props.filelist, ...paths]);
			},
		});
	};
	// 上传图片
	const onUpload = (files: Array<File>) => {
		return new Promise((resolve) => {
			const requests = files.map((file: any) => uploadFileByPath(file.path));
			Promise.all(requests).then(res => {
				const paths: Array<string> = res.map(item => item.data.url);
				resolve(paths);
			});
		});
	};
	// 删除图片
	const onDelete = (index: number): void => {
		emits('delete', index);
		emits('update:delete', props.filelist.filter((_, i) => i !== index));
	};
	// 预览图片
	const onPreview = (index: number): void => {
		uni.previewImage({
			current: index,
			urls: props.filelist.map(image => (getImagePath(image.path || image))),
		})
	};
</script>

<style lang="scss" scoped>
	.my-upload {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.upload-item {
			position: relative;
		}
		.close-button {
			position: absolute;
			top: 8%;
			right: 8%;
			z-index: 10;
			width: 44rpx;
			height: 44rpx;
			background: rgba(000, 000, 000, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.photo {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			display: block;
		}
		.mr0 {
			margin-right: 0 !important;
		}
	}
</style>